import {
    Button,
    Form,
    Input,
    Select,
    message
} from 'antd';
//import { useState } from 'react';
import './AddMembers.css'
import { useNavigate } from "react-router-dom";
import myAxios from "../../../utils/myAixos"
import { useState, useEffect } from 'react';
const { Option } = Select;
const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 2400,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};
function getNewDate() {
    var date = new Date();
    var transverse = "-";
    var Verticalpoint = ":";
    var month = date.getMonth() + 1;//获取月份
    var strDate = date.getDate();//获取具体的日期           
    var strHour = date.getHours();//获取...钟点
    var strMinute = date.getMinutes();//获取分钟数
    var strSeconde = date.getSeconds();//获取秒钟数
    //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
    //如果是则在前面加“0”
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 1 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    if (strHour >= 1 && strHour <= 9) {
        strHour = "0" + strHour
    }
    if (strMinute >= 1 && strMinute <= 9) {
        strMinute = "0" + strMinute;
    }

    if (strSeconde >= 1 && strSeconde <= 9) {
        strSeconde = "0" + strSeconde;
    }
    //时间日期字符串拼接
    var NewDate = date.getFullYear() + transverse + month + transverse + strDate + " " +
        strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde;
    //返回拼接字符串
    return NewDate;
}
const AddMembers = () => {
    let [selectData, setSelecData] = useState([])
    //列表全部数据
    let [hwSelect, setHwSelect] = useState([])
    //首先获取角色管理
    let [jueData, setJueData] = useState()
    //获取场馆数据
    let [venueData, setVenueData] = useState([])
    useEffect(() => {
        myAxios({
            url: "/getRoleLine",
            method: "post",
            data: {
            }
        }).then(res => {
            console.log(11, res.data.data)
            setHwSelect(res.data.data)
            let hwArr = []
            for (let i of res.data.data) {
                hwArr.push(i.r_bumen)
            }
            console.log(hwArr)
            setSelecData(hwArr)
        })

        myAxios({
            url: "/getRoleData",
            method: "post",
            data: {
            }
        }).then(res => {
            if (res.data.status === 200) {
                console.log(res.data.data)
                setJueData(res.data.data)
            } else {
                //跳转到404页面 
            }
        })

        myAxios({
            url: "/venueData",
            method: "post",
            data: {
            }
        }).then(res => {
            let ppArr = []
            for (let i of res.data.data) {
                ppArr.push(i.v_name)
            }
            setVenueData(ppArr)
        })
    }, [])
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log('Received values of form: ', values);
        // console.log(values.user)
        let myTime = getNewDate()
        console.log(myTime)
        //储蓄状态
        let hp
        let hwNumber;
        for (let i = 0; i < hwSelect.length; i++) {
            if (hwSelect[i].r_bumen === values.department) {
                console.log(99, hwSelect[i].r_number)
                hwNumber = parseInt(hwSelect[i].r_number) + 1
            }
        }
        for (let i = 0; i < jueData.length; i++) {
            if (jueData[i].r_bumen === values.department) {
                hp = jueData[i].r_status
            }
        }
        myAxios({
            url: "/userAdd",
            method: "post",
            data: {
                u_user: values.user,
                u_name: values.name,
                u_email: values.email,
                u_department: values.department,
                u_authority: values.authority,
                u_address: values.address,
                u_password: values.password,
                u_loginTime: myTime,
                number: hwNumber,
                u_status: hp
            }
        }).then(res => {
            if (res.data.status === 200) {
                message.success('添加成功')
                setTimeout(() => { navigate('/HomePage/MemberManagement') }, 2000)
            } else {
                message.error('添加失败')
            }
        })
    };
    //返回按钮
    const fanhui = () => {
        navigate('/HomePage/MemberManagement')
    }
    //下拉框数据
    return (
        <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <div style={{ width: '97%', height: '96%', border: '1px solid #cccccc', borderRadius: '10px 10px 0 0', overflow: 'hidden', }}>
                <div style={{ width: '100%', height: '8%', backgroundColor: '#f3f3f3', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: '13px', marginLeft: '15px' }}>添加成员</span>
                    <button onClick={fanhui} style={{ width: '70px', height: '60%', marginRight: '15px', border: '1px solid #e4e4e4', borderRadius: '8px', fontSize: '13px', color: '#999999' }}>&lt;&nbsp;&nbsp;返回</button>
                </div>
                <div className='hwForm' style={{ width: '100%', height: '100%', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Form
                        {...formItemLayout}
                        form={form}
                        name="register"
                        onFinish={onFinish}
                        style={{
                            width: '380px',
                            height: '500px',
                            marginLeft: '-100px'
                        }}
                        scrollToFirstError
                    >
                        {/*用户账号*/}
                        <Form.Item
                            name="user"
                            label="用户账号"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户账号!',
                                },
                            ]}
                        >
                            <Input placeholder="输入成员账号" style={{ width: 230 }} />
                        </Form.Item>
                        {/*用户名*/}
                        <Form.Item
                            name="name"
                            label="用户名"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input placeholder="输入成员名" style={{ width: 230 }} />
                        </Form.Item>
                        {/*邮箱*/}
                        <Form.Item
                            name="email"
                            label="E-mail"
                            rules={[
                                {
                                    type: 'email',
                                    message: '输入的电子邮件无效!',
                                },
                                {
                                    required: true,
                                    message: '请输入您的电子邮件!',
                                },
                            ]}
                        >
                            <Input placeholder="输入邮箱" style={{ width: 230 }} />
                        </Form.Item>
                        {/*所属部门*/}
                        <Form.Item
                            name="department"
                            label="所属部门"
                            style={{ fontSize: '12px' }}
                            rules={[
                                {
                                    required: true,
                                    message: '请选择部门!',
                                },
                            ]}
                        >
                            <Select placeholder="选择部门" style={{ width: 230, textAlign: 'left', }}>
                                {selectData.map((val, index) => (<Option key={index} value={val}>{val}</Option>))}
                                {/*<Option value="销售部">销售部</Option>
                                <Option value="研发部">研发部</Option>
                                <Option value="运营部">运营部</Option>*/}
                            </Select>
                        </Form.Item>
                        {/*用户权限*/}
                        <Form.Item
                            name="authority"
                            label="用户权限"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择用户权限!',
                                },
                            ]}
                        >
                            <Select placeholder="选择权限" style={{ width: 230, textAlign: 'left', }}>
                                <Option value="团课管理">团课管理</Option>
                                <Option value="订单管理">订单管理</Option>
                                <Option value="用户管理">用户管理</Option>
                            </Select>
                        </Form.Item>
                        {/*所属场馆*/}
                        <Form.Item
                            name="address"
                            label="所属场馆"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择场馆!',
                                },
                            ]}
                        >
                            <Select placeholder="选择场馆" style={{ width: 230, textAlign: 'left', }}>
                                {venueData.map((val, index) => (<Option key={index} value={val}>{val}</Option>))}
                                {/*<Option value="健生馆">健生馆</Option>
                                    <Option value="麻将馆">麻将馆</Option>
                                    <Option value="饭馆">饭馆</Option>*/}
                            </Select>
                        </Form.Item>
                        {/*登录密码*/}
                        <Form.Item
                            name="password"
                            label="密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的密码!',
                                },
                            ]}
                            hasFeedback
                        >
                            <Input.Password style={{ width: 230 }} />
                        </Form.Item>
                        {/*确定密码*/}
                        <Form.Item
                            name="confirm"
                            label="确定密码"
                            dependencies={['password']}
                            hasFeedback
                            rules={[
                                {
                                    required: true,
                                    message: '请确认您的密码!',
                                },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('您输入的两个密码不匹配!'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password style={{ width: 230 }} />
                        </Form.Item>
                        <Form.Item {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit" style={{ float: 'left', left: '13px' }}>
                                保存
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}

export default AddMembers